import React from 'react'
import { Outlet,useNavigate} from 'react-router-dom'


export default function Home() {
  /* 
    使用NavLink或者Link进行跳转 被称作为声明式路由导航
    使用navigate方法进行路由跳转,被称作为编程式路由导航
  
  */
  //如果不想用link去修改路由地址，而是点击button跳转，就要使用useNavigate这个hooks进行路由跳转
  //使用方法：调用useNavigate，得到一个函数，再把这个函数调用，传的第一个参数就是需要跳转的路由地址
  const navigate = useNavigate()
  const getMusicHandle =()=>{
    navigate('/main/home/music')
  }
  const getNewsHandle =()=>{
    navigate('/main/home/news')
  }
  

  return (
    <div>
        <h3>我是Home的内容</h3>
        <button onClick={getMusicHandle}>music</button>
        <button onClick={getNewsHandle}>news</button>
        {/* 在要渲染子组件的位置上书写<Outlet/> */}
        <Outlet/>
    </div>
       
  )
}
